<template>
  <!-- vertical 是垂直布局 -->
  <el-container :direction="vertical" class="bg">
    <el-header height="100px">
      <img src="../../assets/images/Logo.png" alt="盛邦升华"/>
      <h1>盛邦升华考试后台管理系统</h1>
      <!-- Header content -->
    </el-header>
    <!-- horizontal 水平布局 -->
    <!-- el-container等于section -->
    <el-container :direction="horizontal" id="content">
      <el-container :direction="vertical" class="content-left">
        <h3>注册说明：</h3>
        <p>●用户设置：采用实名制。</p>
        <p>
          ●密码设置：密码长度为6位，纯数字
        </p>
      </el-container>
      <el-container :direction="vertical" class="content-right">
        <h2>注册</h2>
        <el-main>
          <el-form
            :model="form"
            ref="form"
            :rules="rules"
            label-width="80px"
            :inline="false"
            size="normal"
          >
            <el-form-item label="用户名：" prop="username">
              <el-input
                v-model="form.username"
                prefix-icon="el-icon-s-custom"
                placeholder=" 请输入用户名"
              ></el-input>
              
            </el-form-item>
            <el-form-item label="密码" prop="userpassword">
              <el-input
                v-model="form.userpassword"
                prefix-icon="el-icon-lock"
                placeholder=" 输入密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="userpassword">
              <el-input
                v-model="repeatUserpassword"
                prefix-icon="el-icon-lock"
                placeholder=" 请在次输入密码"
                type="password"
                @blur="isEqualPasswordHandle"
              ></el-input>
              <span v-if="!isEqualPassword">两次密码不一致</span>
            </el-form-item>
            <el-form-item label="电话：" prop="userphone">
              <el-input
                v-model="form.userphone"
                prefix-icon="el-icon-mobile-phone"
                placeholder=" 请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="btn-register"
                type="primary"
                @click.prevent="onSubmit('form')"
                >立即注册</el-button>
              <router-link :to="{name:'Login'}">
                已有账号，返回登录
              </router-link>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </el-container>
    <el-footer>
      <div class="back">
        <router-link to="/">
          <img src="../../assets/images/shouye.svg" alt="" />
          <span>返回首页</span>
        </router-link >
      </div>
      <div class="slogan">-学好硬本领，赢在软实力-</div>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      vertical: "vertical",
      horizontal: "horizontal",
      repeatUserpassword:"",
     isEqualPassword: true,
      form: {
        username: "",
        userpassword: "",
        userphone: "",
      },
      rules: {
        username: [
          {
            required: true, // 设置必填项
            message: "请输入用户名", // 提示信息
            trigger: "blur", // 什么时候显示提示信息  blur是默认值
          },
          // {
          //   // 输入的内容是否符合规则
          //   min:3,
          //   max:12,
          //   message:'请输入3-12位大小写英文字母',
          //   trigger:'blur'
          // }
          {
            pattern: /^[a-zA-Z0-9]{4,12}$/,
            message: "请输入4-12位大小写英文字母",
            trigger: "blur",
          },
        ],
        userpassword: [
          {
            required: true, // 设置必填项
            message: "请输入密码", // 提示信息
            trigger: "blur", // 什么时候显示提示信息  blur是默认值
          },
          {
            pattern: /\d{6,12}/,
            message: "请输入6位数字",
            trigger: "blur",
          },
        ],
        userphone: [
          {
            required: true, // 设置必填项
            message: "请输入手机号", // 提示信息
            trigger: "blur", // 什么时候显示提示信息  blur是默认值
          },
          {
            pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|17[0-9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
            message: "请输入11位正确的手机号",
            trigger: "blur",
          },
        ],
      },
    };
  },
  // computed:{
  //   isEqualPassword(){
  //     // true/false
  //     return this.form.userpassword === this.repeatUserpassword;
  //   },
  // },
  methods: {
    onSubmit(formname) {
      // 对表单做校验
      // $refs[name] 获取通过 ref 绑定的dom元素
      this.$refs[formname].validate((valid) => {
        // valid是校验结果
        // 简单理解成功是true 失败是false
        if (valid) {
         // 将数据放到表单对象中，因为后台接收的数据类型是表单对象
         const formData = new FormData();
        for(let key in this.form) {
          formData.append(key,this.form[key]);
        }

        //提交数据
        this
        .$axios
        .post('/system/sqUserlogin/userregister',
        formData)
        .then(res => {
          if(res.data.code !=1) {
            alert(res.data.msg)
            return false;
          }
          alert(res.data.msg)
          this.$router.push("/Login")
        })
        .catch(err => {
          console.log(err)
        })
      } else {
          console.log("2");
          return false;
        }
      });
  },
  isEqualPasswordHandle(){
    if(this.form.userpassword === this.repeatUserpassword) {
      this.isEqualPassword = true;
      return;
    }
    this.isEqualPassword = false;
  },
  },
};
</script>
// 私有样式
<style scoped>
.bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url(../../assets/images/back.png);
  background-size: 100%;
  background-position: center;
}
.el-header {
  position: relative; /* 相对定位 */
}
.el-header img {
  position: absolute; /* 绝对定位 */
  left: 70px;
  top: 0;
  width: 120px;
  height: 120px;
}
.el-header h1 {
  text-align: center;
  line-height: 45px;
  font-size: 30px;
  color: #033887;
}

#content {
  display: flex;
  width: 1050px;
  margin: 0 auto;
  margin-top: 5px;
  background-image: url("../../assets/images/seagull.png");
  border-radius: 15px;
  box-shadow: 20px 20px 27px #b1caf2;
  background-size: 100% 100%; /*图片充满容器，但是图片会变形 */
  /* background-size: cover; 图片充满容器，但是图片等比缩放 */
}
.content-left {
  padding: 0 10px;
  /* 容器内的每一项在主轴上居中显示 */
  justify-content: center;
  flex: 0 0 500px;
  color: white;
  line-height: 1.2em;
  font-size: 20px;
}
.content-right {
  padding: 10px 50px;
}
.content-right h2 {
  top: 0;
  text-align: center;
  letter-spacing: 2em;
}
.content-right .el-main {
  display: flex;
  /*主轴方向 默认水平从左到右*/
  /*colum 主轴方向从啥到下 */
  flex-direction: column;
  /*主轴上的项(元素) 排列方式 居中center*/
  justify-content: center;
  margin-top: 10px;
  background-image: url(../../assets/images/inp.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.btn-register {
  width: 100%;
  background-color: #033887;
  box-shadow: 5px 5px 5px #b1caf2;
}
.el-footer {
  padding: 0 70px;
  display: flex;
  justify-content: space-between;
  line-height: 60px;
  font-size: 18px;
}
.el-footer .back{
   margin-left: 50px;
  font-size: 20px;
  text-decoration: none;
  color: #033887;
}
.el-footer .back img {
  width: 20px;
  height: 20px;
}
.el-footer .slogan {
  color: #033887;
  font-size: 25px;
  margin-right: 60px;
}
</style>
// 公共样式
<style>
.el-input__prefix {
  left: 0;
  top: 0;
  background-color: #033887;
  width: 35px;
  border-radius: 4px;
  font-size: 20px;
  color: white;
}
.el-input--prefix .el-input__inner {
  padding-left: 45px;
}
.el-form-item__label {
  color: #033887;
}
</style>
